<!--
* @FileDescription: 图表工具栏组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-3 12:32:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-02-20 12:25:44
-->
<template>
    <div class="toolBox">
        <el-row :gutter="24" class="toolBoxTop">
            <el-col :span="3">
                <span class="hover config_btn" @click="toolClick({type:'lineConfig',show:false})">
                    <svg-icon icon-class="shezhi" />
                    <span>
                        <slot name="toolComTitle"></slot>
                    </span>
                </span>
            </el-col>
            <el-col :span="5">
                <el-date-picker style="width: 100%;" size="small" v-model="state.timeRange"
                    :type="formatValue?'daterange':'datetimerange'" range-separator="-" :shortcuts="shortcuts"
                    start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange"
                    />
            </el-col>
            <el-col :span="!lengedListShow?11:13" class="toolcol">
                <el-tooltip v-for="item in state.totaltoolList" :key="item.type" class="box-item" effect="light"
                    :content="!item.show&&state.toolType==item.type?item.selname:item.name" placement="top">
                    <div ref="toolRef" class="icon_box hover"
                        :class="!item.show&&state.toolType==item.type ? 'active':''" :disabled="item.disabled">
                        <svg-icon @click="toolClick(item)" v-if="!item.disabled" :icon-class="item.icon" />
                        <svg-icon v-else style="fill-opacity: 0.4;cursor:not-allowed" :icon-class="item.icon" />
                    </div>
                </el-tooltip>
                <el-dropdown placement="bottom">
                    <div ref="toolRef" class="icon_box hover">
                        <svg-icon icon-class="gengduo" />
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in moreList">
                                <span @click="toolClick(item)" style="display: flex;align-items: center;">
                                    <svg-icon :icon-class="item.icon" style="margin-right: 8px;" />{{ item.name }}
                                </span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-col>
            <el-col :span="3">
                <span ref="gongnengAgr" class="hover config_btn" @click="toolClick({type:'gongnengAgr',show:false})">
                    <svg-icon icon-class="gongnengguanli" />
                    <span>功能管理</span>
                </span>
            </el-col>
            <el-col :span="2" v-if="!lengedListShow">
                <span ref="legendRef" :class="state.legendShow&&state.toolType=='legend' ? 'active':''"
                    class="hover config_btn" @click="toolClick({type:'legend',show:false})">
                    <svg-icon icon-class="tuli" />
                    <span>图例</span>
                </span>
            </el-col>
        </el-row>
        <!-- 曲线配置 -->
        <lineConfigCom v-if="state.toolType=='lineConfig'" :drawerShow="state.drawerShow"
            :lineConParams="state.lineConParams" :searList="state.searList" @submitPointListClick="submitPointListClick"
            @timeRangepageSubmit="timeRangepageSubmit" :tabList="tabList" :lengedList="state.legendList"
            :chartType="chartType" @toolChange="toolChangesearch" @submitPointListClickhis="submitPointListClickhis"
            @radioChange="radioChange" :acSearchList="acSearchList" :timeRange="timeRange"
            :noconnected="noconnected" :attrObj="attrObj">
        </lineConfigCom>
        <!-- 已选择工具栏 -->
        <toolSel @toolSelShowClick="toolSelShowClick" :toolSelShow="state.toolSelShow"
            v-if="state.toolType=='gongnengAgr'&&state.toolShow"
            :style="{position: 'absolute',left:state.xydata.x+'px',top:state.xydata.y+'px',zIndex:1}"
            :toolList="state.totaltoolList"></toolSel>
        <!-- 日历组件 -->
        <calendarCom v-if="state.toolType=='3'&&!state.toolShow"
            :style="{position: 'absolute',left:state.xydata.x+'px',top:state.xydata.y+'px',zIndex:1}"
            :date="state.timeRange" :calendarList="state.calendarList"
            :legendList="state.legendList" @selectDay="selectDay" @prevNextselectDay="prevNextselectDay">
        </calendarCom>
        <!-- Y轴范围弹框 -->
        <div v-if="state.toolType=='14'&&!state.toolShow" class="yRange"
            :style="{position: 'absolute',left:state.xydata.x+'px',top:state.xydata.y+'px',zIndex:1}">
            <h3>Y轴范围</h3>
            <p><span>Y轴最小值</span>
                <el-input v-model="input" placeholder="请输入"></el-input>
            </p>
            <p><span>Y轴最大值</span>
                <el-input v-model="input" placeholder="请输入"></el-input>
            </p>
            <p class="btnBox">
                <el-button type="info">重置</el-button>
                <span>
                    <el-button type="info">取消</el-button>
                    <el-button type="primary">确认</el-button>
                </span>
            </p>
        </div>
        <!-- 图例组件 -->
        <legendCom v-if="state.legendShow&&state.toolType=='legend'"
            :style="{position: 'absolute',left:state.xydata.x+'px',top:state.xydata.y+'px',zIndex:1}"
            :lengedList="state.legendList" :chartType="chartType" :barLegendShow="barLegendShow"
            @checkedlegendComClick="checkedlegendComClick" :micaiChart="micaiChart"></legendCom>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect,
        ref,
        nextTick
    } from 'vue';
    import axios from "@/utils/request"
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    import lineConfigCom from "./lineConfigCom.vue";
    import calendarCom from "./calendarCom.vue";
    import toolSel from "./toolSel.vue";
    import legendCom from "./legendCom.vue";
    import _ from 'lodash'
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();

    const emits = defineEmits(['toolChange'])
    const props = defineProps({
        acSearchList: {//从默认页面来的已选的筛选条件
            type: Array,
            default: () => {
                return []
            }
        },
        totaltoolList: {
            type: Array,
            default: () => {
                return []
            }
        },
        chartType: {
            type: Number,
            default: () => {
                return 1
            }
        },
        toolSelShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        noconnected: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        lengedListShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        barLegendShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        noSellegendComShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        lineConParams: {
            type: Object,
            default: () => {}
        },

        moreList: {
            type: Array,
            default: () => {
                return [{
                    name: '续传数据',
                    icon: 'xuchuanshuju',
                    type: 11,
                }, {
                    name: '截图',
                    icon: 'jietu1',
                    type: 12,
                }, {
                    name: '打印',
                    icon: 'dayin',
                    type: 13,
                }]
            }
        },
        showToolList: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        searList: {
            type: Array,
            default: () => {
                return []
            }
        },
        timeRange: {
            type: Array,
            default: () => {
                return []
            }
        },
        tabList: {
            type: Array,
            default: () => {
                return [{
                    type: 1,
                    name: '测点选择'
                }, {
                    type: 2,
                    name: '属性'
                }]
            }
        },
        lengedList: {
            type: Array,
            default: () => {
                return []
            }
        },
        formatValue: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        micaiChart:{
            type: Boolean,
            default: () => {
                return false
            }
        },
        attrObj: {
            type: Object,
            default: () => {}
        },
    })

    const shortcuts = [{
            text: '今日',
            value: () => {
                const end = dayjs()
                const start = dayjs().format('YYYY-MM-DD 00:00:00')
                return [start, end]
            },
        }, {
            text: '一周',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setDate(start.getDate() - 7)
                return [start, end]
            },
        },
        {
            text: '一个月',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setMonth(start.getMonth() - 1)
                return [start, end]
            },
        }
    ]

    // 重点
    const state = reactive({
        searList:computed(()=>props.searList),
        drawerShow: false,
        calendarShow: false,
        toolSelShow: false,
        toolShow: false,
        legendShow: false,
        toolType: undefined,
        num: 0,
        numone: 0,
        xydata: {
            x: 0,
            y: 0
        },
        calendarList: [],
        lineConParams: computed(() => {
            return props.lineConParams
        }),
        legendList: [],
        totaltoolList: props.totaltoolList,
        qianhouList: [{
            name: '前一条',
            icon: 'qianyitiao',
            type: 8,
            selname: '取消前一条',
            show: true
        }, {
            name: '后一条',
            icon: 'houyitiao',
            type: 9,
            selname: '取消后一条',
            show: true
        }],
        timeRange: [],
        attrObj:undefined
    })
    // 查询历史搜索
    function toolChangesearch(val) {
        emits('toolChange', {
            type: val.type,
            data: val.data
        })
    }
    // 量程和自适应事件
    function radioChange(val) {
        emits('radioChange', val)
    }
   

    function selectDay(val) {
        state.timeRange = [dayjs(val).format('YYYY-MM-DD 00:00:00'),
            dayjs(val).format('YYYY-MM-DD 23:59:59')
        ]
        let data = {
            type: 'dateType',
            data: state.timeRange,
        }
        emits('toolChange', data)
    }

    function toolClick(item) {
        item.show = !item.show
        let data = {}
        let type = item.type
        state.toolType = type
        state.toolShow = item.show
        if (type == 'lineConfig') {
            state.drawerShow = dayjs().unix()
        }
        if (type == '0') { //今
            if (!item.show) {
                state.timeRange =props.micaiChart? [dayjs().format('YYYY-MM-DD HH:00:00'), dayjs().format('YYYY-MM-DD HH:mm:ss')]:[dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
                data = {
                    type: 'dateType',
                    data: state.timeRange,
                }
                // getcalendarList(dayjs(state.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'), dayjs(state.timeRange[1])
                //     .format(
                //         'YYYY-MM-DD HH:mm:ss'))
                emits('toolChange', data)
            } else {
                state.timeRange = []
            }
        }
        if (type == '1') { //前一天
            if (state.timeRange && state.timeRange.length > 0) {
                item.show = true
                state.timeRange[0] =props.micaiChart? dayjs(state.timeRange[0]).subtract(1, 'hour'):dayjs(state.timeRange[0]).subtract(1, 'day')
                state.timeRange = [props.micaiChart?dayjs(state.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'):dayjs(state.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'), 
                props.micaiChart?dayjs(
                    state.timeRange[0]).add(1,
                    'hour').format(
                    'YYYY-MM-DD HH:mm:ss'):dayjs(
                    state.timeRange[0]).add(1,
                    'day').format(
                    'YYYY-MM-DD HH:mm:ss')]
                data = {
                    type: 'dateType',
                    data: state.timeRange,
                }
                emits('toolChange', data)
            } else {
                item.show = true
                proxy.$modal.msgWarning('请先选择时间!');
            }
        } else if (type == '2') { //后一天
            if (state.timeRange && state.timeRange.length > 0) {
                item.show = true
                state.timeRange[1] =props.micaiChart?dayjs(state.timeRange[1]).add(1, 'hour'): dayjs(state.timeRange[1]).add(1, 'day')
                state.timeRange = [props.micaiChart?dayjs(state.timeRange[1]).format('YYYY-MM-DD HH:mm:ss'):dayjs(state.timeRange[1]).format('YYYY-MM-DD HH:mm:ss'), 
                props.micaiChart?dayjs(
                    state.timeRange[1]).add(1,
                    'hour').format(
                    'YYYY-MM-DD HH:mm:ss'):dayjs(
                    state.timeRange[1]).add(1,
                    'day').format(
                    'YYYY-MM-DD HH:mm:ss')]
                data = {
                    type: 'dateType',
                    data: state.timeRange,
                }
                emits('toolChange', data)
            } else {
                item.show = true
                proxy.$modal.msgWarning('请先选择时间!');
            }
        } else if (type == '3') { //事件日历
            nextTick(() => {
                state.xydata.x = proxy.$refs.toolRef[state.toolType].offsetLeft - 10
                state.xydata.y = proxy.$refs.toolRef[state.toolType].offsetTop + 20
            })
            getcalendarList(dayjs(state.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'), 
            dayjs(state.timeRange[1]).format(
                'YYYY-MM-DD HH:mm:ss'))
        } else if (type == '4') { //显示圆点
            if (!item.show) {
                data = {
                    type: type,
                    data: true,
                }
                emits('toolChange', data)
            } else {
                data = {
                    type: type,
                    data: false,
                }
                emits('toolChange', data)
            }
        } else if (type == '5') { //标尺
            if (!item.show) {
                data = {
                    type: type,
                    data: '5',
                }
                emits('toolChange', data)
            } else {
                data = {
                    type: type,
                    data: '-1',
                }
                emits('toolChange', data)
            }
        } else if (type == '6') { //游标
            if (!item.show) {
                data = {
                    type: type,
                    data: '6',
                }
                emits('toolChange', data)
            } else {
                data = {
                    type: type,
                    data: '-1',
                }
                emits('toolChange', data)
            }

        } else if (type == '7') { //框选
            if (!item.show) {
                data = {
                    type: type,
                    data: '7',
                }
                emits('toolChange', data)
            } else {
                data = {
                    type: type,
                    data: '-1',
                }
                emits('toolChange', data)
            }
            // data = {
            //     type: type,
            //     data: '7',
            // }
            // emits('toolChange', data)
        } else if (type == '10') { //纵向放大
            item.show = true
            data = {
                type: type,
                data: item.show
            }
            emits('toolChange', data)
        } else if (type == 'gongnengAgr') { //功能管理
            state.xydata.x = proxy.$refs.gongnengAgr.offsetLeft - 120
            state.xydata.y = proxy.$refs.gongnengAgr.offsetTop + 20
        } else if (type == 'legend') {
            state.legendShow = !state.legendShow
            state.xydata.x = proxy.$refs.legendRef.offsetLeft - 260
            state.xydata.y = proxy.$refs.legendRef.offsetTop + 20
            data = {
                type: type,
                data: state.legendList,
                attrObj:state.attrObj
            }

            emits('toolChange', data)
        } else if (type == '12') { //截图
            data = {
                type: type
            }
            emits('toolChange', data)
        } else if (type == '13') { //打印
            data = {
                type: type
            }
            emits('toolChange', data)
        } else if (type == '14') {
            nextTick(() => {
                state.xydata.x = proxy.$refs.toolRef[3].offsetLeft - 10
                state.xydata.y = proxy.$refs.toolRef[3].offsetTop + 20
            })
            if (!item.show) {
                data = {
                    type: type,
                    data: '14',
                }
                emits('toolChange', data)
            } else {
                data = {
                    type: type,
                    data: '-1',
                }
                emits('toolChange', data)
            }
        }
    }

    function timeChange(val) {
        console.log(val,"大萨达客户撒谎")
        state.timeRange = val
        let data = {
            type: 'dateType',
            data: val,
        }
        // getcalendarList(dayjs(state.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'), dayjs(state.timeRange[1]).format(
        //     'YYYY-MM-DD HH:mm:ss'))
        emits('toolChange', data)
    }

    function timeRangepageSubmit(val) {
        state.timeRange = [dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'), dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss')]
    }
    // 上一月下一月切换
    function prevNextselectDay(val){
        getcalendarList(dayjs(val).format('YYYY-MM'),dayjs(val).format('YYYY-MM'))
    }
    function getcalendarList(startTime, endTime) {
        let endVal=dayjs(startTime).endOf('month').date()
        let data = {
            pointIds: state.legendList.map(item => {
                return item.pointId
            }),
            queryStartDate: dayjs(startTime).format('YYYY-MM-01'),
            queryEndDate:dayjs(startTime).format('YYYY-MM-'+endVal),
            flag:"M"
        }
        axios.post('/pointData/eventCalendar', data).then(res => {
            state.calendarList = res.data
        })
    }
    // 提交查询历史事件
    function submitPointListClickhis() {
        state.toolType = -1
    }

    // 提交图例信息
    function submitPointListClick(data, attrObj) {
        state.toolType = -1
        state.legendList = data
        state.attrObj=attrObj
        let datalend = {
            type: 'legend',
            data: state.legendList,
            datatwo: state.timeRange,
            attrObj: attrObj
        }
        let datatime = {
            type: 'dateType',
            data: state.timeRange
        }
        emits('toolChange', datalend)
        emits('toolChange', datatime)
        let checkedlegend = {
            type: 'checkedlegend',
            data: data
        }
        emits('toolChange', checkedlegend)
    }
    watchEffect(() => {
        state.legendList = props.lengedList
        if (props.timeRange.length > 0) {
            state.timeRange = props.timeRange
        }
        if (props.showToolList) {
            state.totaltoolList = [...state.totaltoolList, ...state.qianhouList]
        }
        state.toolSelShow = props.toolSelShow
    })

    function toolSelShowClick(val, data) {
        state.toolShow = val
        state.totaltoolList = data
        state.toolSelShow = val
    }
    // 图例复选框事件
    function checkedlegendComClick(data) {
        let checkedlegend = {
            type: 'checkedlegend',
            data: data
        }
        emits('toolChange', checkedlegend)
    }
</script>
<style lang="scss" scoped>
    .yRange {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid rgba(68, 136, 255, 0.1);
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 2px 20px rgba(91, 109, 128, 0.2);
        backdrop-filter: blur(20px);

        h3 {
            padding: 10px 0 0;
            margin: 0;
            font-size: 16px;
            color: rgba(62, 70, 79, 1);
            font-weight: 700;
        }

        p {
            color: rgba(62, 70, 79, 0.8);
            font-size: 16px;
            display: flex;
            align-items: center;

            span {
                white-space: nowrap;
                margin-right: 10px;
            }
        }

        .btnBox {
            margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }

    .toolBox {
        display: flex;
        align-items: center;
        position: relative;

        .toolBoxTop {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: rgba(62, 70, 79, 1);
            width: 100%;

            .config_btn {
                display: flex;
                align-items: center;
                // justify-content: center;

                &.active {
                    border-radius: 2px;
                    background: rgba(91, 109, 128, 0.08);
                    padding: 2px;
                }

                span {
                    margin-left: 10px;
                    white-space: nowrap;
                }
            }
        }

        .toolcol {
            display: flex;
        }

        .icon_box {
            margin: 0 10px;
            padding: 1px 2px;

            &.active {
                background-color: rgba(91, 109, 128, 0.24);
                border-radius: 2px;
            }
        }
    }
</style>